<template>
  <view class="view">
    <view>普通</view>
    <view v-if="test1">test1:{{getValue(obj[test])}}</view>
    <view v-if="getBoolean(test1)">test1:{{getValue(obj[test])}}</view>
    <view v-if="getBoolean(test1)&&getBoolean(test2)">test1{{'&&'}}test2:{{getValue('test')}}</view>
    
    <view>副作用</view>
    <view v-if="getBoolean(test1)&&getValue()">test1</view>

    <view>嵌套</view>
    <view style="color:red" v-if="test1">
      <view v-if="test2">test1{{'&&'}}test2:{{getValue(obj[test])}}</view>
    </view>

    <view>分支</view>
    <view style="color:green">
      <view v-if="test1">test1:{{getValue(obj[test])}}</view>
      <view v-else-if="test2">test2:{{getValue(obj[test])}}</view>
      <view v-else>else:{{getValue(obj[test])}}</view>
    </view>

    <view>循环</view>
    <view style="color:blue" v-for="(item,index) in list" :key="index">
      <view v-if="test1">test1:{{getValue(obj[item])}}</view>
      <view v-if="item.length>0">item.length:{{getValue(obj[item])}}</view>
      <view v-if="getBoolean(item)">item:{{getValue(obj[item])}}</view>
      <view v-if="getBoolean(item)">item:{{getValue('test')}}</view>
    </view>

    <button @click="test1=!test1">test1={{test1}}</button>
    <button @click="test2=!test2">test2={{test2}}</button>

    <button @click="getIndex">getIndex</button>
  </view>
</template>

<script>
let index = 0

export default {
  data () {
    return {
      test1: false,
      test2: false,
      list: ['test'],
      obj: {
        test: 'obj:test'
      },
      test: 'test'
    }
  },
  filters: {
    getValueFilter (value) {
      return `value:${value}`
    }
  },
  methods: {
    getBoolean (value) {
      return !!value
    },
    getValue (value) {
      console.log('getValue')
      index++
      return `value:${value}`
    },
    getIndex () {
      console.log(index)
      return index
    }
  }
}
</script>

<style>
</style>